<template>
    <el-aside class="aside" :class="isCollapse?'w80':''">
        <el-menu
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
            background-color="#545c64"
            text-color="#fff"
            :unique-opened='true'
            router
            active-text-color="#ffd04b" :class="isCollapse?'el-menu--collapse-a':''">
            
            <el-menu-item index="/welcome" class="el-menu-item-a">
                <i class="el-icon-menu"></i>
                <span slot="title" class="slide-title">概述</span>
            </el-menu-item>

            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>导航一</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/home">home</el-menu-item>
                    <el-menu-item index="/detail">detail</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>导航二</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </el-aside>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
    }
</style>
<script>
// 引入公共的bug，来做为中间传达的工具
import Bus from '../../util/bus.js'
export default {
    name: 'sidebarItem',
    data() {
       return {
            isCollapse: false,
            activePath:'/welcome'
        }
    },
//	创建实例时就会触发
    created() {
        
    },
    mounted() {
        console.log(this.$route);
        let _this = this;
        // 接收
        Bus.$on('val', (data) => {
            _this.isCollapse = data
        })
    },
//	检测视图值变化触发，有改变就会触发
    computed:{
        
    },
    methods:{
        handleOpen(key, keyPath) {
        console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    },
    components: {
        
    },
}
</script>